<template>
  <div class="parentWrapper">
    <div class="info">
      <div class="name">{{ parentData.user.nickname }}</div>
      <div class="date">3小时前</div>
      <div class="reply" @click="handleClick">回复</div>
    </div>
    <div class="mainContent">
      {{ parentData.content }}
    </div>
    <Parent v-if="parentData.parent" :parentData="parentData.parent" />
  </div>
</template>

<script>
import eventBus from "../../utils/eventBus";
export default {
  name: "Parent",
  props: ["parentData"],
  methods: {
    handleClick() {
      eventBus.$emit("callReply", this.parentData.id);
    },
  },
};
</script>

<style lang="less" scoped>
.parentWrapper {
  padding: 10/360 * 100vw;
  border: 1px solid #d7d7d7;

  .info {
    display: flex;
  }
  .date {
    flex: 1;
    padding-left: 10/360 * 100vw;
    color: #707070;
    font-size: 12/360 * 100vw;
  }
  .reply {
    color: #707070;
    font-size: 14/360 * 100vw;
  }
}
.mainContent {
  padding: 15/360 * 100vw 0;
}
</style>